<template>
  <div class="main">
    <div class="form">
      <van-form>
        <van-field label="用户名" :value="form.username" placeholder="请选择用户名" @click="showPicker = true"></van-field>
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="userColumns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
        <van-field label="URL" v-model="form.url" placeholder="请输入URL"></van-field>
        <van-field label="值" v-model="form.value" placeholder="请输入值"></van-field>
      </van-form>
      <van-button type="info" round class="submit-btn" @click="confirmSearch">确定</van-button>
    </div>

    <div class="content">
      <van-list @load="onLoad" :finished="finished" v-model="loading" >
        <van-cell v-for="item in list" class="cell-item" :key="item.id">
          <div>
            <div class="url">{{ item.url }}</div>
            <div class="value">{{ item.value }}</div>
          </div>
          <div class="right-side">
            <div class="user">{{ item.username }}</div>
            <div class="time">{{ item.operateTime }}</div>
          </div>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import { getUsers } from '@/api/goods'
import request from '@/utils/request'

export default {
  name: 'logger',
  data() {
    return {
      form: {
        username: '',
        url: '',
        value: ''
      },
      pagination: {
        page: 0,
        pageSize: 10,
        total: 0
      },
      showPicker: false,
      userColumns: [],
      list: [],
      finished: false,
      loading: false
    }
  },
  mounted() {
    this.getLoginName()
  },
  methods: {
    getLoginName() {
      getUsers().then(res => {
        this.userColumns = res.data
      })
    },
    getSearch() {
      this.loading = true
      let postData = {
        ...this.pagination,
        queryCondition: {
          ...this.form
        }
      }
      request.post('/records/page', postData).then(res => {
        this.list = [...this.list, ...res.data.records]
        this.pagination.total = res.data.total
        if(res.data.page * res.data.pageSize >= res.data.total) {
          console.log('结束加载')
          this.finished = true
          this.loading = false
        }
      }).finally(() => {
        this.loading = false
      })
    },
    confirmSearch() {
      this.pagination = {
        page: 1,
        pageSize: 10,
        total: 0
      }
      this.list = []
      this.finished = false
      this.getSearch()
    },
    onConfirm(val) {
      this.form.username = val
      this.showPicker = false
    },
    onLoad () {
      console.log('111')
      this.pagination.page++
      this.getSearch()
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  background-color: #f7f8fa;
  min-height: calc(100vh - 50px);
  padding-top: 30px;
  .submit-btn {
    margin: 20px;
    width: calc(100% - 40px);
    box-sizing: border-box;
  }

  .content {
    .cell-item ::v-deep .van-cell__value {
      display: flex;
      justify-content: space-between;
      gap: 50px;
      .right-side {
        width: 170px;
        text-align: right;
      }
    }
  }
}
</style>
